<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./jquery/jquery-1.12.4.min.js"></script>
<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

<body>
    <div class="box"></div>
    <button class="btn1">慢慢淡出</button>
    <button class="btn2">淡入</button>
    <button class="btn3">切换</button>
    <script>
        // 获取btn1按钮，绑定了一个click事件
        $('.btn1').click(function () {

            console.log('111');
            // 获取box盒子，利用了原型对象上的fadeOut方法 慢慢淡出，参数一是淡出的时间，参数二是回调函数
            $('.box').fadeOut(1000, function () {
                // 相关逻辑
                console.log('test fadeOut');
            })
        })

        // 淡入
        $('.btn2').click(function () {
            // 淡入 参数可传可不传，不传使用默认效果，如果传参，参数一可以控制效果的时长，参数二 在该过程中有相关逻辑
            /*  $('.box').fadeIn(10000, function () {
                 console.log('test fadeIn');
             }); */
            $('.box').fadeIn('slow');
        })

        // 切换
        $('.btn3').click(function () {
            $('.box').fadeToggle();
        })
    </script>
</body>

</html>